<template>
  <div class="demo-collapse">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="生命周期" name="1">        
        <lifecycle></lifecycle>
      </el-collapse-item>
      <el-collapse-item title="模板语法" name="2">
        <templatelanguage></templatelanguage>
      </el-collapse-item>
      <el-collapse-item title="指令-事件监听指令" name="3">
        <directivesvon></directivesvon>        
      </el-collapse-item>
      <el-collapse-item title="指令-属性绑定和样式绑定指令" name="4">
        <directivesvbind></directivesvbind>
      </el-collapse-item>
      <el-collapse-item title="指令-其他指令" name="5">        
        <directivesvother></directivesvother>
      </el-collapse-item>
      <el-collapse-item title="组件基础" name="6">        
        <componentbase></componentbase>
      </el-collapse-item>
      <el-collapse-item title="模板引用" name="7">        
        <reftemplate></reftemplate>
      </el-collapse-item>
      <el-collapse-item title="计算属性侦听器" name="8">        
        <computedandwatch></computedandwatch>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import templatelanguage from "../components/base/templatelanguage.vue";
import directivesvbind from "../components/base/directivesvbind.vue";
import directivesvon from "../components/base/directivesvon.vue";
import directivesvother from "../components/base/directivesvother.vue";
import lifecycle from "../components/base/lifecycle.vue";
import reftemplate from "../components/base/reftemplate.vue";
import componentbase from "../components/base/componentbase.vue";
import computedandwatch from "../components/base/computedandwatch.vue";

const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
</script>